<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./登录.css">
</head>
<body>
   
   <div class="container">
   <div class="form-box">
    <!-- 注册 -->
    <div class="register-box hidden">
    <h1>register</h1>
    <input type="text" placeholder="用户名" id="username">
    <input type="password" placeholder="邮箱">
    <input type="password" placeholder="密码" id="password">
    <input type="password" placeholder="确认密码">
    <button class="set">注册</button>
    </div>
    <!-- 登录 -->
    <div class="login-box">
    <h1>login</h1>
    <input type="text" placeholder="用户名" id="usernameb">
    <input type="password" placeholder="密码" id="passwordb">
    <button class="setb">登录</button>
    </div>
   </div>
    <div class="box left">
    <h2>欢迎来到</h2>
    <img src="" alt="">
    <p>已有账号</p>
    <button id="login">去登录</button>
    </div>
    <div class="box right">
    <h2>欢迎来到</h2>
    <img src="" alt="">
    <p>还没有注册</p>
    <button id="register">去注册</button>
     </div>
   </div>
   <script>
    var set = document.querySelector('.set');
    var username=document.querySelector('#username');
    var password=document.querySelector('#password');
    set.addEventListener('click',function(){
      // 点击后保存于本地
      localStorage.setItem('username',username.value);
      localStorage.setItem('password',password.value);
      alert('成功注册');
    })
    var setb=document.querySelector('.setb');
    var usernameb=document.querySelector('#usernameb');
    var passwordb=document.querySelector('#passwordb');
    setb.addEventListener('click',function(){
      localStorage.setItem('usernameb',usernameb.value);
      localStorage.setItem('passwordb',passwordb.value);
      // 进行比对
      if(localStorage.getItem('username')==localStorage.getItem('usernameb')&&localStorage.getItem('passwordb')==localStorage.getItem('passwordb'))
      {
        alert('登录成功');
        window.close;
        // 页面跳转
        window.location.href="file:///C:/Users/lenovo/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/%E5%8A%A8%E7%94%BB.html"
      }
      else{
        alert('用户名或密码错误，请重新输入');
      }
    })
    // 获取元素
    let login=document.getElementById('login');
    let register=document.getElementById('register');
    let form_box=document.getElementsByClassName('form-box')[0];
    let register_box=document.getElementsByClassName('register-box')[0];
    let login_box=document.getElementsByClassName('login-box')[0];

    // 绑定时间
    register.addEventListener('click',()=>{
      // 水平移动80%
      form_box.style.transform='translateX(80%)';
      // 登陆盒子隐藏
      login_box.classList.add('hidden');
      // 注册盒子取消隐藏
      register_box.classList.remove('hidden');
    })
    login.addEventListener('click',()=>{
      form_box.style.transform='translateX(0%)';
      register_box.classList.add('hidden');
      login_box.classList.remove('hidden');
    })
    



   </script>
</body>
</html>